<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ToDoList</title>
</head>
<style>
    
</style>

<body>
    <div id="app">
        <input type="text" v-model="event">
        <button @click="add">添加</button>
        <p>正在进行--> {{event_list.length}}</p>
        <incident v-for="(item,index) in event_list" :event_data="item"  @del_index="del_index" @now_check="now_check"></incident>
        <p>已经完成--> {{event_true.length}}</p>
        <incident v-for="(item,index) in event_true" :event_data="item"  @del_index="del_index" @now_check="now_check_ret"></incident>
        <p>搞不定</p>
    </div>

    <template id="incident">
        <div>
            <input type="radio" @click="chek(event_data.id)" :key="event_data.id">
            <span>{{event_data.event}}</span>
            <button @click="dele(event_data.id)">删除</button>
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let incident = {
            template:"#incident",
            props:['event_data'],
            methods:{
                dele(now_id){
                    this.$emit("del_index",now_id)
                },
                chek(now_id){
                    this.$emit("now_check",now_id)
                }
            }
        }

        let app = new Vue({
            el:"#app",
            data:{
                id:0,
                event:"",
                is_show:false,
                event_list:[],
                event_true:[]
            },
            methods:{
                add(){
                    this.event_list.push({
                        id:this.id++,
                        event:this.event,
                        is_show:this.is_show
                    });
                },
                del_index(now_id){
                    this.event_list = this.event_list.filter(e=>{
                      return e.id != now_id;
                    })
                },
                now_check(now_id){
                    // this.event_list.forEach(element => {
                    //     if(element.id == now_id){
                    //         element.is_show = !element.is_show;
                    //     }
                    // });

                   
                    
                   this.event_list = this.event_list.filter(e=>{
                    return e.now_id != now_id;

                    })

                    this.event_true.push(this.event_list.filter(e=>{
                   return e.now_id == now_id;
                    }))  
                },
                now_check_ret(now_id){
                    this.event_true.forEach(element => {
                        if(element.id == now_id){
                            element.is_show = !element.is_show;
                        }
                    });

                    this.event_list.push(this.event_true.filter(e=>{
                        return !e.is_show;
                    }))
                    
                   this.event_true = this.event_true.filter(e=>{
                      return e.is_show;
                    })
                }
            },
            components:{
                incident
            }
        })
    </script>
</body>

</html>